<template>
    <div class="topList">
        <div class="topListTile">排行榜</div>
        <van-swipe :loop="false" :width="350" :show-indicators="false" class="lists">
            <van-swipe-item class="listItem" v-for="item in songsList" :key="item.id" :loop="false">
                <div class="listTitle">
                    {{ item.name }}
                </div>
                <div v-for="(i, index) in item.tracks" :key="i.id" class="songItem" @click="playMusic(i.id)">
                    <img :src="i.al.picUrl" alt="" class="listimg">
                    <div class="content">
                        <div class="contentLeft"
                            :class="[index === 0 ? 'contentLeft_one' : (index === 1 ? 'contentLeft_two' : 'content_three')]">
                            {{ index + 1 }}
                        </div>
                        <div class="contentRight">
                            <div class="rightName">{{ i.name }}</div>
                            <div class="rightAu">{{ i.ar[0].name }}</div>
                        </div>
                    </div>
                </div>
            </van-swipe-item>
        </van-swipe>
    </div>
    <van-notify id="van-notify" />
</template>

<script lang='ts' setup>
import { getTopIdList, getTopList } from '@/request/api/home';
import { getMusicDetail } from '@/request/api/musicListDetail';
import store from '@/store';
import { showNotify } from 'vant';
import { onMounted, ref } from 'vue'
let topIdList = ref([{}])
let songsList = ref([])
onMounted(async () => {
    let res = await getTopIdList()
    if (res.data.code === 200) {
        let list = res.data.list
        topIdList.value = list.slice(0, 3)
    }
    topIdList.value.forEach(async item => {
        let res = await getTopList(item.id)
        if (res.data.code === 200) {
            let newres = res.data.playlist
            newres.tracks = newres.tracks.slice(0, 3)
            songsList.value.push(newres)
        } else {
            showNotify({ type: 'danger', message: `获取${item.name}失败！` });
        }
    })
})
const playMusic = async (index: number) => {
    if (store.state.playList[0].id) {
        let targetIndex = store.state.playList.findIndex(item => +item.id === index)
        if (targetIndex !== -1) {
            store.commit('updatePlayListIndex', targetIndex)
            return
        }
    }
    let res = await getMusicDetail(index)
    if (res.data.code === 200 && store.state.playList[0].id) {
        let newPlayList = JSON.parse(JSON.stringify(store.state.playList)).concat(res.data.songs)
        store.commit('updatePlayList', newPlayList)
        store.commit('updatePlayListIndex', newPlayList.length - 1)
    } else if (res.data.code === 200) {
        store.commit('updatePlayList', res.data.songs)
        store.commit('updatePlayListIndex', 0)
    } else {
        showNotify({ type: 'danger', message: '获取歌曲失败' });
    }
}
</script>
 
<style lang = "less" scoped>
.topList {
    padding: 0.4rem 0 0.2rem 0;

    .topListTile {
        font-weight: 900;
        margin-bottom: 0.2rem;
    }

    .lists {

        .listItem {
            width: 100%;
            height: 4.4rem;
            background-color: #fff;
            border-radius: 0.2rem;

            .listTitle {
                font-weight: 900;
                padding: 0.2rem;
            }

            .songItem {
                display: flex;
                padding: 0 0 0.1rem 0.2rem;

                .listimg {
                    width: 1rem;
                    border-radius: 0.2rem;
                }

                .content {
                    display: flex;
                    align-items: center;

                    .contentLeft {
                        min-width: 0.6rem;
                        font-weight: bolder;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .contentLeft_one {
                        color: DarkOrange
                    }

                    .contentLeft_two {
                        color: silver
                    }

                    .content_three {
                        color: #CD853F
                    }

                    .contentRight {
                        .rightName {
                            font-weight: 600;
                            margin-bottom: 0.05rem;
                        }

                        .rightAu {
                            color: #999;
                            font-size: 0.2rem;
                        }
                    }
                }
            }

        }
    }

}
</style>